<!--  -->
<template>
  <div>
    <div id="member" v-show="boxShow">
      <div class="memberBox">
        <login ref="myLogin" :show.sync="type" @toggleType="toggleType"></login>
        <register
          ref="myRegister"
          :show.sync="type"
          @toggleType="toggleType"
        ></register>
        <forget
          ref="myForget"
          :show.sync="type"
          @toggleType="toggleType"
        ></forget>
        <!-- 修改密码 -->
        <changePassword
          ref="changePassword"
          :show.sync="type"
          @toggleType="toggleType"
        ></changePassword>
      </div>
    </div>
  </div>
</template>

<script>
import app from "./mixin/app";
export default {
  mixins: app,
};
</script>
<style lang="scss" scoped>
.memberBox {
  width: 358px;
  height: 493px;
  background: #fff;
  position: absolute;
  overflow: hidden;
  top: 50%;
  margin-top: -246.5px;
  left: 50%;
  margin-left: -179px;
  .close {
    position: absolute;
    display: inline-block;
    width: 34px;
    height: 34px;
    line-height: 34px;
    right: 0;
    top: 0;
    text-align: center;
    cursor: pointer;
    &:hover {
      background: #ea2827;
      .icon {
        background-position: -144px -94px;
      }
    }
    &:active {
      background: #c11c1b;
    }
    &:after {
      content: "";
      display: inline-block;
      width: 0;
      height: 100%;
      vertical-align: middle;
    }
    .icon {
      display: inline-block;
      vertical-align: middle;
    }
  }
}
</style>
